<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-10-28 17:49:34
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-10-28 19:24:07
 * @FilePath: \vue-project\src\components\PersonalInformation.vue
 * @Description: 个人信息弹窗
 * 
-->
<template>
  <a-modal v-model:visible="visible" :simple="true" :hide-cancel="true" ok-text="关闭">
    <div>
      <a-space size="large" direction="vertical">
        <div class="flex items-center">
          <span>头像:</span>
          <a-avatar :size="64"><img alt="avatar" :src="userInfo.avatar || avatarUrl" /></a-avatar>
        </div>
        <div class="flex items-center">
          <span>账号:</span>
          <span>{{ userInfo.username }}</span>
        </div>
      </a-space>
    </div>
  </a-modal>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useUserStore } from '@/stores'
import avatarUrl from '@/assets/avatar.png'

const useUser = useUserStore()
const visible = ref(false)

const userInfo = computed(() => useUser.userInfo)
</script>

<style lang="scss" scoped>
</style>